<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件管理</title>
    <link rel="shortcut icon" href="favicon/favicon.icon">
    <link rel="stylesheet" href="bootstrap-3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap-treeview/bootstrap-treeview.min.css">
    <link rel="stylesheet" href="toastr/toastr.min.css">
    <link rel="stylesheet" href="index/index.css">


</head>
<body>

<div class="container-fluid" id="app">
    <div class="col-md-3 col-sm-12">
        <div class="panel panel-default">
            <div class="panel-heading"><i class="glyphicon glyphicon-folder-open"></i> 目录树</div>
            <div class="panel-body">
                <!--目录树-->
                <div id="dirTree"></div>
            </div>
        </div>

    </div>
    <div class="col-md-9 col-sm-12">
        <div class="panel panel-default">
            <div class="panel-heading"><i class="glyphicon glyphicon-th-list"></i> 文件列表</div>
            <div class="panel-body">
                <div class="container-fluid ">

                    <!--头部标签-->
                    <div class="page-header">
                        <h1>文件管理系统 <small>基于系统目录结构的文件管理系统 V1.0</small></h1>
                        <div v-if="link != '请选择文件或文件夹' " class="btn-group" role="group" aria-label="...">
                            <button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-open"></i> 文件上传</button>
<!--                            <button type="button" class="btn btn-info"><i class="glyphicon glyphicon-transfer"></i> 移动文件</button>-->
                            <button @click="createDir" type="button" class="btn btn-warning"><i class="glyphicon glyphicon-folder-open"></i> 新建目录</button>
                        </div>
                    </div>

                    <!--导航路径-->
                    <div class="alert alert-warning">
                        <strong>{{link}}</strong>
                        <span v-if="link != '请选择文件或文件夹' ">|</span>
                        <a href="javascript:;" @click="backup" v-if="link != '请选择文件或文件夹' ">返回上一级</a>
                    </div>

                    <!--文件列表-->
                    <div class="col-md-3 col-xs-4" v-for="item,index in fileList">
                        <div class="row item" @dblclick="preview(item.path,item.size)">
                            <div class="col-md-3">
                                <img :src='item.icon'/>
                            </div>
                            <div class="col-md-9">
                                <b>{{item.name}}</b><br/>
                                <span v-if="item.size != '-' ">{{item.size}}</span>
                                <i class="glyphicon glyphicon-trash" style="color: #d9534f;" title="删除" @click="delFile(item.path)"></i>
                                <i class="glyphicon glyphicon-text-size" style="color: #337ab7;" title="重名" @click="reName(item.path)"></i>
                                <i v-if="item.size != '-' " class="glyphicon glyphicon-save" style="color: #337ab7;" title="下载" @click="download(item.path)"></i>
                                <br/>
                                <span>{{item.time}}<span v-if="item.size != '-' ">（{{item.suffix}}）</span></span>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>

    </div>
</div>


<script src="js/jquery-1.12.4.js"></script>
<script src="js/vue.js"></script>
<script src="bootstrap-3.4.1/js/bootstrap.min.js"></script>
<script src="bootstrap-treeview/bootstrap-treeview.min.js"></script>
<script src="crypto/crypto-js.min.js"></script>
<script src="crypto/AESUtil.js"></script>
<script src="toastr/toastr.min.js"></script>
<script src="index/index.js"></script>

</body>
</html>